<template>
	<view class="schedule-chart">
		<navBar title="进度图表"  @goBack="uni.navigateBack()"></navBar>
		
		<view class="placeholder" :style="{marginTop: `${topHeight}`}"></view>
		
		<view class="title-content">
			<view>区间/站点</view>
			<view @click="goSelectIntervalOrSite">
				<text>{{ currentTableItem ? currentTableItem.lineSiteSectionName : '' }}</text>
				<u-icon name="arrow-right" color="#a7aebd" size="20"></u-icon>
			</view>
		</view>
		
		<view class="tab-content">
			<view @click="changeModelType(item.code)" v-for="(item, index) in typeList" :key="index" class="tab-item" :class="[currentType === item.code ? 'active' : '']">{{ item.label }}</view>
		</view>
		
		<view v-if="['gh', 'xgh'].includes(this.currentType)" class="table-chart">
			<view class="table-header">
				<view class="text-middle" style="width: 60px;">
					<text>环号工序</text>
				</view>
				<view v-for="(item, index) in tableHeadList" :key="index" :class="[item.children.length ? 'multilayer' : 'text-middle']" :style="{width: item.width + 'px'}">
					<template v-if="item.children.length">
						<view class="text-middle">
							<text>{{ item.label }}</text>
						</view>
						<view class="multilayer-item">
							<view v-for="(item1, index1) in item.children" :key="index1" class="text-middle" :style="{width: item1.width + 'px'}">
								<text>{{ item1.label }}</text>
							</view>
						</view>
					</template>
					<text v-else>{{ item.label }}</text>
				</view>
			</view>
			
			<view class="table-body">
				<view v-for="(item, index) in fillList" :key="index" class="table-body-item">
					<view class="table-body-text" style="width: 60px;">{{ item.serialNumber }}</view>
					<view v-for="(item1, index1) in tableHeadList" :key="index1" class="table-body-fill-content">
						<template v-if="item1.children.length">
							<view v-for="(item2, index2) in item1.children" :key="index2" :style="{width: item2.width + 'px'}" class="table-body-fill-max">
								<view :style="{width: item2.width * (item[`${index1 + '-' + index2}`] ? item[`${index1 + '-' + index2}`].width : 1) + 'px'}" :class="[item[`${index1 + '-' + index2}`] ? 'fill-color' : '']" class="table-body-fill">
									<text>{{ item[`${index1 + '-' + index2}`] && item2.isSpecial ? `${Math.round(item[`${index1 + '-' + index2}`].width * 10000) / 100}%` : '' }}</text>
								</view>
							</view>
						</template>
						<view v-else :style="{width: item1.width + 'px'}" class="table-body-fill-max">
							<view :style="{width: item1.width * (item[index1] ? item[index1].width : 1) + 'px'}" :class="[item[index1] ? 'fill-color' : '']" class="table-body-fill">
								<text>{{ item[index1] && item1.isSpecial ? `${Math.round(item[index1].width * 10000) / 100}%` : '' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	
		<view v-if="['snwrd', 'swwrd'].includes(this.currentType)" class="hole-chart">
			<view class="label-content">
				<view v-if="currentType === 'snwrd'" class="green-label">开孔</view>
				<view v-if="currentType === 'snwrd'" class="blue-label">闭孔</view>
				<view class="red-label">已注浆</view>
				<view class="black-label">无需注浆</view>
				<view class="white-label">未注浆</view>
			</view>
			
			<view class="hole-data">
				<view class="hole-content">
					<view v-for="(item, index) in outerPoreList" :key="index" class="hole-list">
						<view v-for="(item1, index1) in item" :key="index1" class="hole-item white-fill" :class="[item1.className]">
							<text>{{ item1.label }}</text>
							<view class="fill-content">
								<view v-if="item1.tipsList && item1.tipsList.length" class="tips-content">
									<view v-for="(item2, index2) in item1.tipsList" :key="index2" class="tips-item">{{ item2.date }} {{ item2.label }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-show="outerPoreList.length || innerBoreList.length" class="label-title" :style="{width: textWidth}">{{ currentTableItem ? currentTableItem.lineSiteSectionName : '' }}</view>
				<view class="hole-content">
					<view v-for="(item, index) in innerBoreList" :key="index" class="hole-list">
						<view v-for="(item1, index1) in item" :key="index1" class="hole-item white-fill" :class="[item1.className]">
							<text>{{ item1.label }}</text>
							<view class="fill-content">
								<view v-if="item1.tipsList && item1.tipsList.length" class="tips-content">
									<view v-for="(item2, index2) in item1.tipsList" :key="index2" class="tips-item">{{ item2.date }} {{ item2.label }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getPlanList, getPlanSiteList, getListByLineSiteSectionId, getProcessByLineSiteSectionId, getSteelRingWorkloadList } from "@/api/comprehensive/comprehensive.js"
	import { handleFormatDate, } from '@/utils/date.js'
	import { getSystemHeightInfo } from '@/utils/common.js'
	
	export default {
		data() {
			return {
				// 类型列表
				typeArray: [
					{ label: '大钢环', code: 'gh', isShow: false },
					{ label: '小钢环', code: 'xgh', isShow: false },
					{ label: '隧内微扰动', code: 'snwrd', isShow: false },
					{ label: '隧外微扰动', code: 'swwrd', isShow: false }
				],
				// 当前选择的类型
				currentType: '',
				// 线路数据
				lineArray: [],
				// 进度表 - 表头
				scheduleHeaderList: [],
				// 进度表 - 填充数据
				scheduleFill: {},
				// 当前操作的表格数据
				currentTableItem: {},
				// 表格表头列表
				tableHeadList: [
					{ label: '管线改排', matchStr: '管线改排', width: 60, children: [], ids: [] },
					{ label: '道床凿除', matchStr: '道床凿除', width: 60, children: [], ids: [] },
					{ label: '环纵缝堵漏', matchStr: '环纵缝堵漏', width: 70, children: [], ids: [] },
					{ label: '牛腿', matchStr: '牛腿', width: 130, children: [{ label: '左', matchStr: '左', width: 64, ids: [] }, { label: '右', matchStr: '右', width: 64, ids: [] }] },
					{ label: '侧板', matchStr: '侧板', width: 130, children: [{ label: '侧板左', matchStr: '左', isSpecial: true, width: 64, ids: [] }, { label: '侧板右', matchStr: '右', isSpecial: true, width: 64, ids: [] }] },
					{ label: '封顶块', matchStr: '封顶块', width: 64, children: [], ids: [] },
					{ label: '钢拉条', matchStr: '钢拉条', width: 64, children: [], ids: [] },
					{ label: '成环焊接', matchStr: '成环焊接', isSpecial: true, specialNum: 10, specialNumBig: 6, width: 60, children: [], ids: [] },
					{ label: '螺栓种植', matchStr: '螺栓种植', isSpecial: true, specialNum: 11, specialNumBig: 7, width: 60, children: [], ids: [] },
					{ label: '环氧填充', matchStr: '环氧填充', isSpecial: true, specialNum: 12, specialNumBig: 12, width: 60, children: [], ids: [] },
					{ label: '道床恢复', matchStr: '道床恢复', width: 60, children: [], ids: [] },
					{ label: '防腐处理', matchStr: '防腐处理', width: 60, children: [], ids: [] },
					{ label: '管线恢复', matchStr: '管线恢复', width: 60, children: [], ids: [] }
				],
				// 填充表格数据
				fillList: [],
				 // 颜色类型
				colorType: { '开孔': 'green-fill', '闭孔': 'blue-fill', '注浆': 'red-fill', '无需注浆': 'black-fill' },
				// 类型优先级
				priority: { 'blue-fill': 3, 'red-fill': 2, 'green-fill': 1, 'black-fill': 0 },
				// 外孔列表
				outerPoreList: [],
				// 内控列表
				innerBoreList: [],
				// 尺寸信息
				systemHeightInfo: {}
			}
		},
		computed: {
			// 类型列表
			typeList() {
				return this.typeArray.filter(item => item.isShow)
			},
			// 区间站点文字宽度
			textWidth() {
				if (this.outerPoreList.length && this.outerPoreList[0].length) {
					return `${this.outerPoreList[0].length * 55}px`
				} else if (this.innerBoreList.length && this.innerBoreList[0].length) {
					return `${this.innerBoreList[0].length * 55}px`
				}
				return '100%'
			},
			// 顶部高度
			topHeight() {
				const { stateHeight, navbarHeight } = this.systemHeightInfo
				return `${(stateHeight + navbarHeight) || 0}px`
			}
		},
		onLoad(options) {
			this.id = options.id
			this.systemHeightInfo = getSystemHeightInfo()
			// 获取线路数据
			if (uni.getStorageSync("_temp_line-array")) {
				this.lineArray = uni.getStorageSync("_temp_line-array")
				uni.removeStorageSync("_temp_line-array")
			}
			// 监听选择的区间站点
			this.$$off(this.$config.ENV_SELECT_SITE)
			this.$$on(this.$config.ENV_SELECT_SITE, data => {
				this.changeLineStation({
					lineId: data[0].id,
					lineName: data[0].name,
					lineSiteSectionId: data[2].id,
					lineSiteSectionName: data[2].name,
					lineSiteSectionType: data[1].id
				})
			});
			this.checkWorkload()
		},
		methods: {
			/** 查看工作量 */
			async checkWorkload() {
				if (this.isLoading) {
					return
				}
				this.isLoading = true
				// 判断是否需要重新获取线路站点数据
				if (!this.recordLineStationList || !this.recordLineStationList.length) {
					const stationList = await Promise.all(this.lineArray.map(item => this.getStationByLineId(item.id)))
					this.recordLineStationList = this.lineArray.map((item, index) => ({ ...item, children: stationList[index] }))
				}
				this.currentTableItem = null
				this.getScheduleList().then(async () => {
					if (!this.currentTableItem) {
						this.isLoading = false
						uni.showToast({ title: "当前没有工作量图表", icon: "none" })
						return
					}
					try {
						await this.changeModelType(this.currentType ? this.currentType : this.typeArray[0].code, true)
					} catch (_err) { console.log() } finally {
						const timeout = setTimeout(() => {
							this.isLoading = false
							clearTimeout(timeout)
						}, 500)
					}
				}).catch(() => {
					this.isLoading = false
				})
			},
			
			/** 根据线路获取区间站点 */
			getStationByLineId(lineId) {
				return new Promise(async resolve => {
					const stationList = []
					if (!this.id || !this.$store.getters.dictMap || !this.$store.getters.dictMap.line_site_section_type) {
						resolve(stationList)
						return
					}
					const params = { currPage: 1, pageSize: 10000, params: { lineId: lineId, pmId: this.id }}
					let typeArray = this.$store.getters.dictMap.line_site_section_type
					const [section, station] = await Promise.all([getPlanList(params), getPlanSiteList(params)])
					const temp = typeArray.find(item => item.code === 'qj')
					// 判断是否有区间数据
					if (section && section.result && Array.isArray(section.result.list) && section.result.list.length && temp) {
						stationList.push({ ...temp, children: section.result.list })
					}
					// 判断是否有站点等其他
					if (station && station.result && Array.isArray(station.result.list)) {
						typeArray = typeArray.filter(item => item.code !== 'qj')
						for (const item of typeArray) {
							const array = station.result.list.filter(item1 => item1.lineSiteType === item.code)
							if (array.length) {
								stationList.push({ ...item, children: array })
							}
						}
					}
					resolve(stationList)
				})
			},
			
			/** 获取进度列表数据 */
			getScheduleList() {
				this.currentTableItem = null
				if (!this.id) {
					return
				}
				return new Promise((resolve, reject) => {
					this.recordTotalList = []
					this.typeArray.forEach(item => { item.isShow = false })
					getListByLineSiteSectionId({
						currPage: 1,
						pageSize: 99999,
						params: {
							pmId: this.id,
							reviewStatus: 'tg',
							projectId: uni.getStorageSync("isOwner") || undefined,
						}}).then(res => {
						if (res && res.result && Array.isArray(res.result.list)) {
							let data = null
							let num = 0
							for (const item of res.result.list) {
								const typeArray = item.constructionMethod.split(',')
								// 获取默认第一个匹配到的数据 - 为选中数据
								if (!data) {
									const temp = typeArray.find(item1 => ['gh', 'xgh', 'snwrd', 'swwrd'].includes(item1))
									if (temp) {
										data = item
									}
								}
								// 判断需要显示哪些类型
								const index = this.typeArray.findIndex(item1 => typeArray.includes(item1.code))
								if (index !== -1) {
									if (!this.typeArray[index].isShow) {
										this.typeArray[index].isShow = true
										num++
									}
								}
								if (num === this.typeArray.length && data) {
									break
								}
							}
							if (data) {
								this.currentTableItem = data
								this.recordTotalList = res.result.list || []
								resolve()
								return
							}
						}
						reject()
					})
				})
			},
			
			/** 改变弹框中标题的类型 */
			async changeModelType(code, isLoop = false) {
				this.lineStationValue = []
				this.lineStationList = []
				this.scheduleHeaderList = []
				this.scheduleFill = {}
				this.currentTableItem = {}
				this.currentType = code
				const lineStationList = JSON.parse(JSON.stringify(this.recordLineStationList))
				const filterArray = this.recordTotalList.filter(item => item.constructionMethod === code)
				if (filterArray.length) {
					// 去掉重复的id
					const lineSiteSectionIdList = [...new Set(filterArray.map(item => Number(item.lineSiteSectionId)))]
					// 根据类型获取线路站点列表
					for (let i = 0; i < lineStationList.length; i++) {
						if (Array.isArray(lineStationList[i].children)) {
							for (let j = 0; j < lineStationList[i].children.length; j++) {
								if (Array.isArray(lineStationList[i].children[j].children)) {
									for (let k = 0; k < lineStationList[i].children[j].children.length; k++) {
										if (lineSiteSectionIdList.includes(lineStationList[i].children[j].children[k].id)) {
											continue
										}
										if (lineStationList[i].children[j].children.length) {
											lineStationList[i].children[j].children.splice(k, 1)
											k--
										}
									}
								}
								if (!lineStationList[i].children[j].children.length) {
									lineStationList[i].children.splice(j, 1)
									j--
								}
							}
						}
						if (!lineStationList[i].children.length) {
							lineStationList.splice(i, 1)
							i--
						}
					}
					this.lineStationList = lineStationList
					// 回显区间站点
					this.currentTableItem = filterArray[0]
					// const { lineId, lineSiteSectionType, lineSiteSectionId } = this.currentTableItem
					// for (const item of this.lineStationList) {
					// 	if (item.id === lineId && Array.isArray(item.children)) {
					// 		for (const item1 of item.children) {
					// 			if (item1.code === lineSiteSectionType && Array.isArray(item1.children)) {
					// 				for (const item2 of item1.children) {
					// 					if (item2.id === lineSiteSectionId) {
					// 						this.lineStationValue = [item.id, item1.id, item2.id]
					// 						break
					// 					}
					// 				}
					// 			}
					// 			if (this.lineStationValue.length === 3) {
					// 				break
					// 			}
					// 		}
					// 	}
					// 	if (this.lineStationValue.length === 3) {
					// 		break
					// 	}
					// }
					// 判断打开的弹窗
					if (['snwrd', 'swwrd'].includes(code)) {
						this.steelRingTableModel = false
						this.disturbanceModel = true
					} else {
						this.disturbanceModel = false
						this.steelRingTableModel = true
					}
					// 数据处理...
					if (['snwrd', 'swwrd'].includes(this.currentType)) {
						await Promise.all([this.getSiteWorkload()])
						this.initDisturbanceMFill()
					} else {
						await Promise.all([this.getScheduleHeaderList(this.currentType), this.getSiteWorkload()])
						this.initSteelRingTableFill()
					}
				} else if (isLoop) {
					const index = this.typeArray.findIndex(item => item.code === code)
					if (index + 1 < this.typeArray.length) {
						await this.changeModelType(this.typeArray[index + 1].code, isLoop)
					}
				}
			},
			
			/** 获取区间站点下的工作量数据 */
			getSiteWorkload() {
				return new Promise(resolve => {
					const { pmId, lineId, lineSiteSectionId, lineSiteSectionType, constructionMethod } = (this.currentTableItem || {})
					getProcessByLineSiteSectionId({ pmId: pmId.toString(), constructionMethod, lineId, lineSiteSectionId, lineSiteSectionType }).then(res => {
						if (res && res.result) {
							if (['gh', 'xgh'].includes(constructionMethod) && res.result.ghWorkloadInfo) {
								this.scheduleFill = res.result.ghWorkloadInfo
							} else if (['swwrd', 'snwrd'].includes(constructionMethod) && res.result.wrdWorkloadInfo) {
								this.scheduleFill = res.result.wrdWorkloadInfo
							}
						}
					}).finally(() => {
						resolve()
					})
				})
			},
			
			/** 获取进度表列表 */
			getScheduleHeaderList(code) {
				this.scheduleHeaderList = []
				return new Promise(resolve => {
					getSteelRingWorkloadList({ code }).then(res => {
						if (res && Array.isArray(res.result)) {
							this.scheduleHeaderList = res.result
						}
						resolve()
					})
				})
			},
			
			/** 选择区间站点 */
			goSelectIntervalOrSite() {
				const lineSiteSectionIds = (this.recordTotalList || []).filter(item => item.constructionMethod === this.currentType).map(item => item.lineSiteSectionId)
				uni.setStorageSync("_temp_filter_lineSiteSectionIds", lineSiteSectionIds)
				uni.navigateTo({ url: `/subpackage-overhaul/pages/comprehensiveOverhaul/progressFilling/components/selectSectionAndSite?pmId=${this.id}&projectType=zhdx` });
			},
			
			/** 初始化钢环数据 */
			initSteelRingTableFill() {
				this.fillList = []
				// 表格数据整理...
				if (this.scheduleHeaderList.length) {
					const tempArray = JSON.parse(JSON.stringify(this.scheduleHeaderList))
					for (let i = 0; i < this.tableHeadList.length; i++) {
						for (let k = 0; k < tempArray.length; k++) {
							if (this.tableHeadList[i].matchStr === tempArray[k].name) {
								if (!this.tableHeadList[i].children.length) {
									this.tableHeadList[i].ids.push(tempArray[k].id)
									tempArray[k].name = '名称置空-占位'
									if (Array.isArray(tempArray[k].children) && tempArray[k].children.length) {
										this.tableHeadList[i].ids.push(...tempArray[k].children.map(item => item.id))
									}
								} else {
									if (Array.isArray(tempArray[k].children) && tempArray[k].children.length) {
										for (let j = 0; j < this.tableHeadList[i].children.length; j++) {
											for (let o = 0; o < tempArray[k].children.length; o++) {
												if (tempArray[k].children[o].name.indexOf(this.tableHeadList[i].children[j].matchStr) !== -1) {
													this.tableHeadList[i].children[j].ids.push(tempArray[k].children[o].id)
													tempArray[k].children[o].name = '名称置空-占位'
												}
											}
										}
									}
								}
							}
						}
					}
				}
				// 填充数据整理...
				if (this.scheduleFill.planRingNumbers && Array.isArray(this.scheduleFill.reports)) {
					let numArray = (this.scheduleFill.planRingNumbers.split(',') || []).map(item => {
						if (item.indexOf('-') !== -1) {
							const [start, end] = item.split('-')
							const array = []
							const num = Math.abs(start - end) + 1
							let i = 0
							if (num > 0) {
								while (i < num) {
									if (!array.length) {
										array.push(Math.min(Number(start), Number(end)))
									} else {
										array.push(array[array.length - 1] + 1)
									}
									i++
								}
							}
							return array
						}
						return Number(item)
					}).flat()
					// 判断是否是小钢环 - 一个大钢环 = 3个小钢环
					if (this.currentType === 'xgh') {
						const tempArray = this.scheduleFill.reports.filter(item => item.ringNumber && item.ringNumber.indexOf('-2') !== -1)
						numArray = [...new Set(numArray.map(item => {
							const array = [`${item}-1`]
							for (const item1 of tempArray) {
								const [start] = item1.ringNumber.split('-')
								if (Number(start) === Number(item)) {
									array.push(`${item}-2`)
								}
							}
							array.push(`${item}-3`)
							return array
						}).flat())]
					}
					// 回显填充
					const tempArray = []
					const max = 1000000
					for (let i = 0; i < numArray.length; i++) {
						const data = {}
						for (let j = 0; j < this.scheduleFill.reports.length; j++) {
							if (this.scheduleFill.reports[j].ringNumber.toString() === (numArray[i] + '')) {
								// 获取总工序值
								let total = 0
								let temps = []
								let temp = []
								// 找到对应类型的数据
								for (const item of this.scheduleHeaderList) {
									if (item.id === this.scheduleFill.reports[j].steelRingProcedureId) {
										temps = item.children
										temp = item
										break
									}
									if (item.children.length) {
										for (const item1 of item.children) {
											if (item1.id === this.scheduleFill.reports[j].steelRingProcedureId) {
												temps = item.children
												temp = item
												break
											}
										}
									}
									if (temps.length) {
										break
									}
								}
								// 获取总工序
								if (temps.length) {
									for (const item of temps) {
										if (item.name.indexOf('小') === -1) {
											total += item.workload * max
										}
									}
									total = total / max
								} else if (temp) {
									total = temp.workload
								}
								if (temp.name === '侧板') {
									total /= 2
								}
								// 计算...
								for (let k = 0; k < this.tableHeadList.length; k++) {
									if (this.tableHeadList[k].children.length) {
										for (let o = 0; o < this.tableHeadList[k].children.length; o++) {
											if (this.tableHeadList[k].children[o].ids.includes(this.scheduleFill.reports[j].steelRingProcedureId)) {
												// 是否特殊处理
												if (this.tableHeadList[k].children[o].isSpecial) {
													const percent = (this.scheduleFill.reports[j].workload || 0) * max
													data[`${k}-${o}`] = { current: data[`${k}-${o}`] && data[`${k}-${o}`].current ? data[`${k}-${o}`].current + percent : percent }
													data[`${k}-${o}`].width = data[`${k}-${o}`].current >= max ? 1 : Math.round(data[`${k}-${o}`].current / (total * max) * 10000) / 10000
												} else {
													data[`${k}-${o}`] = { width: 1 }
												}
												break
											}
										}
									} else if (this.tableHeadList[k].ids.includes(this.scheduleFill.reports[j].steelRingProcedureId)) {
										// 是否特殊处理
										if (this.tableHeadList[k].isSpecial) {
											const percent = (this.scheduleFill.reports[j].workload || 0) * max
											data[k] = { current: data[k] && data[k].current ? data[k].current + percent : percent }
											data[k].width = data[k].current >= max ? 1 : Math.round(data[k].current / (total * max) * 10000) / 10000
										} else {
											data[k] = { width: 1 }
										}
										break
									}
								}
							}
						}
						tempArray.push({ serialNumber: numArray[i], ...data })
					}
					this.fillList = tempArray
				}
			},
			
			/** 初始化微扰动数据 */
			initDisturbanceMFill() {
				this.outerPoreList = []
				this.innerBoreList = []
				// 填充数据整理...
				if (this.scheduleFill.planRingNumbers && this.scheduleFill.upFloor && this.scheduleFill.downFloor && Array.isArray(this.scheduleFill.reports)) {
					const tempReportsList = JSON.parse(JSON.stringify(this.scheduleFill.reports))
					// 整理数字列表
					const numArray = (this.scheduleFill.planRingNumbers.split(',') || []).map(item => {
						if (item.indexOf('-') !== -1) {
							const [start, end] = item.split('-')
							const array = []
							const num = Math.abs(start - end) + 1
							let i = 0
							if (num > 0) {
								while (i < num) {
									if (!array.length) {
										array.push(Math.min(Number(start), Number(end)))
									} else {
										array.push(array[array.length - 1] + 1)
									}
									i++
								}
							}
							return array
						}
						return Number(item)
					}).flat()
					let tempArray = []
					// 外孔处理...
					for (let i = this.scheduleFill.upFloor; i > 0; i--) {
						tempArray[this.scheduleFill.upFloor - i] = []
						for (let j = 0; j < numArray.length; j++) {
							const data = { label: `${numArray[j]}w${i}`, tipsList: [] }
							// 无需注浆处理
							if (this.scheduleFill.noNeedGroutingWells) {
								const noNeedGroutingWells = this.scheduleFill.noNeedGroutingWells.split(',')
								for (let k = 0; k < noNeedGroutingWells.length; k++) {
									if (data.label === noNeedGroutingWells[k]) {
										data.className = 'black-fill'
										break
									}
								}
							}
							// 正常...
							for (let k = 0; k < tempReportsList.length; k++) {
								if (tempReportsList[k].ringNumber === data.label) {
									if (!data.className || this.priority[data.className] < this.priority[this.colorType[tempReportsList[k].steelRingProcedureName]]) {
										data.className = this.colorType[tempReportsList[k].steelRingProcedureName]
									}
									data.tipsList.push({ date: handleFormatDate(new Date(tempReportsList[k].constructionDate)), label: tempReportsList[k].steelRingProcedureName })
									tempReportsList.splice(k--, 1)
								}
							}
							// 判断是否孔次重复
							if (tempArray[this.scheduleFill.upFloor - i][j]) {
								tempArray[this.scheduleFill.upFloor - i][j].tipsList.push(...data.tipsList)
							} else {
								tempArray[this.scheduleFill.upFloor - i][j] = data
							}
						}
					}
					this.outerPoreList = tempArray
					tempArray = []
					// 内孔处理...
					for (let i = 0; i < this.scheduleFill.downFloor; i++) {
						tempArray[i] = []
						for (let j = 0; j < numArray.length; j++) {
							const data = { label: `${numArray[j]}n${i + 1}`, tipsList: [] }
							// 无需注浆处理
							if (this.scheduleFill.noNeedGroutingWells) {
								const noNeedGroutingWells = this.scheduleFill.noNeedGroutingWells.split(',')
								for (let k = 0; k < noNeedGroutingWells.length; k++) {
									if (data.label === noNeedGroutingWells[k]) {
										data.className = 'black-fill'
										break
									}
								}
							}
							// 正常...
							for (let k = 0; k < tempReportsList.length; k++) {
								if (tempReportsList[k].ringNumber === data.label) {
									if (data.className !== 'blue-fill' || data.className === 'red-fill' && tempReportsList[k].steelRingProcedureName === '开孔') {
										data.className = this.colorType[tempReportsList[k].steelRingProcedureName]
									}
									data.tipsList.push({ date: handleFormatDate(new Date(tempReportsList[k].constructionDate)), label: tempReportsList[k].steelRingProcedureName })
									tempReportsList.splice(k--, 1)
								}
							}
							// 判断是否孔次重复
							if (tempArray[i][j]) {
								tempArray[i][j].tipsList.push(...data.tipsList)
							} else {
								tempArray[i][j] = data
							}
						}
					}
					this.innerBoreList = tempArray
				}
			},
			
			/** 改变的区间站点 */
			async changeLineStation(data) {
				this.scheduleFill = {}
				this.currentTableItem = {}
				// 找到对应区间站点以及对应施工工法的数据
				const temp = this.recordTotalList.find(item => Number(item.lineSiteSectionId) === Number(data.lineSiteSectionId) && item.constructionMethod.split(',').find(item1 => item1 === this.currentType))
				if (temp) {
					this.currentTableItem =temp
					// 数据处理...
					if (['snwrd', 'swwrd'].includes(this.currentType)) {
						await Promise.all([this.getSiteWorkload()])
						this.initDisturbanceMFill()
					} else {
						await Promise.all([this.getScheduleHeaderList(this.currentType), this.getSiteWorkload()])
						this.initSteelRingTableFill()
					}
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.schedule-chart {
		min-height: 100vh;
		background: #fff;
		.placeholder {
			background: #f5f7fa;
			width: 100vw;
			height: 15px;
		}
		.title-content {
			min-height: 50px;
			line-height: 29px;
			margin: 0 18px 0 14px;
			border-bottom: 1px solid #e4e7ef;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 16px;
			font-weight: bold;
			> view {
				&:nth-of-type(1) {
					color: #445469;
					flex-shrink: 0;
				}
				&:nth-of-type(2) {
					color: #22204e;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					flex: 1;
					text {
						margin-right: 6px;
					}
				}
			}
		}
		.tab-content {
			margin: 14px 0 7px;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			overflow-x: auto;
			padding: 0 8px;
			text-align: center;
			.tab-item {
				line-height: 34px;
				height: 34px;
				border-radius: 20px;
				padding: 0 20px;
				background: #f5f7fa;
				font-size: 16px;
				font-weight: bold;
				color: #445469;
				margin-right: 5px;
				box-sizing: border-box;
				flex-shrink: 0;
				&.active {
					background: #2f80ed;
					color: #fff;
				}
			}
		}
		.table-chart {
			box-sizing: border-box;
			width: calc(100vh - 120px - 44px);
			height: 100vw;
			transform-origin: left bottom;
			transform: translateY(-100%) rotate(90deg);
			color: #606c76;
			font-weight: bold;
			font-size: 16px;
			line-height: 22px;
			background-color: #f1f4f8;
			border: 5px solid #fff;
			overflow: auto;
			// overflow-x: auto;
			// overflow-y: hidden;
			.text-middle {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				> text {
					padding: 0 8px;
				}
			}
			.multilayer {
				> .text-middle {
					line-height: 27px;
					border-bottom: 2px solid #fff;
					height: 49px;
				}
				.multilayer-item {
					height: 49px;
					display: flex;
					align-items: stretch;
					> .text-middle {
						border-right: 2px solid #fff;
					}
					.text-middle:last-child {
						border-right: none;
					}
				}
			}
			.table-header {
				height: 100px;
				display: flex;
				text-align: center;
				flex-wrap: nowrap;
				position: sticky;
				top: 0;
				z-index: 2;
				> view {
					border-right: 2px solid #fff;
					border-bottom: 2px solid #fff;
					background: #f2f5fa;
					flex-shrink: 0;
					&:nth-child(1) {
						position: sticky;
						left: 0;
						z-index: 2;
					}
					&:last-child {
						border-right: none;
					}
				}
			}
			.table-body {
				max-height: calc(100vw - 100px);
				// overflow-y: auto;
				// overflow-x: hidden;
			}
			.table-body-item {
				display: flex;
				align-items: stretch;
				text-align: center;
				flex-wrap: nowrap;
				line-height: 27px;
				> view {
					border-bottom: 2px solid #fff;
				}
				.table-body-text {
					font-size: 14px;
					font-weight: 500;
					color: #475560;
					background: #f1f4f8;
					flex-shrink: 0;
					position: sticky;
					left: 0;
					z-index: 1;
				}
				.table-body-fill-content {
					flex-shrink: 0;
					display: flex;
					.table-body-fill-max {
						height: 100%;
						border-left: 2px solid #fff;
						background: #f2f5fa;
						position: relative;
					}
				}
				.table-body-fill {
					background: #f2f5fa;
					height: 100%;
					text {
						position: absolute;
						width: 100%;
						text-align: center;
						display: block;
						font-size: 13px;
						font-weight: 400;
					}
				}
				.fill-color {
					background: #e0e6fd;
				}
			}
		}
		.hole-chart {
			box-sizing: border-box;
			padding: 16px;
			position: relative;
			.label-content {
				position: absolute;
				top: 16px;
				right: 16px;
				> view {
					font-size: 14px;
					font-weight: 500;
					color: #6e757a;
					margin-bottom: 20px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 20px;
					text-align: center;
					line-height: 1.2;
					&::before {
						content: "";
						width: 12px;
						height: 12px;
						border-radius: 50%;
						border: 1px solid #fff;
						box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .25);
						margin-bottom: 4px;
					}
				}
				.green-label {
					&::before {
						background: #78c317;
					}
				}
				.blue-label {
					&::before {
						background: #377dff;
					}
				}
				.red-label {
					&::before {
						background: #cf4a3b;
					}
				}
				.black-label {
					&::before {
						background: #4e5458;
					}
				}
				.white-label {
					&::before {
						background: #f0f0f0;
					}
				}
			}
			.hole-data {
				box-sizing: border-box;
				width: calc(100vh - 120px - 44px - 32px);
				height: calc(100vw - 32px - 20px - 16px);
				transform-origin: left bottom;
				transform: translateY(-100%) rotate(90deg);
				overflow: auto;
			}
			.hole-content {
				margin-top: 12px;
				.hole-list {
					display: flex;
					align-items: stretch;
					&:first-child .hole-item {
						border-top: 1px solid #e7ecf0;
					}
					.hole-item {
						flex-shrink: 0;
						height: 87px;
						border-bottom: 1px solid #e7ecf0;
						border-left: 1px solid #e7ecf0;
						text-align: center;
						width: 55px;
						padding-top: 8px;
						&:last-child {
							border-right: 1px solid #e7ecf0;
						}
						span {
							color: #475560;
							font-weight: 500;
							font-size: 14px;
							line-height: 20px;
						}
						.fill-content {
							width: 30px;
							height: 30px;
							border-radius: 50%;
							border: 2px solid #fff;
							box-shadow: 0 0 7px #e7ecf0;
							margin: 10px auto;
						}
					}
					.white-fill .fill-content {
						background: #f0f0f0;
						color: #4e5458;
					}
					.green-fill .fill-content {
						background: #78c317;
					}
					.blue-fill .fill-content {
						background: #377dff;
					}
					.red-fill .fill-content {
						background: #cf4a3b;
					}
					.black-fill .fill-content {
						background: #4e5458;
					}
					.fill-content {
						position: relative;
						&:hover .tips-content {
							display: block;
							opacity: 1;
							transition: .3s;
						}
					}
					.tips-content {
						line-height: 20px;
						font-size: 14px;
						padding: 6px;
						border-radius: 4px;
						background: #303133;
						color: #fff;
						display: none;
						opacity: 0;
						position: absolute;
						top: 50%;
						left: 50%;
						//transform: translate(-50%, -70%);
						z-index: 1;
						.tips-item {
							white-space: nowrap;
						}
					}
				}
			}
			.label-title {
				line-height: 63px;
				color: #000;
				font-weight: 500;
				font-size: 14px;
				text-align: center;
			}
		}
	}
</style>
